<template>
  <div class="login" v-show="show" >
    <el-dialog
      class="login-dialog"
      :visible.sync="Show"
      width="23%"
      @open="Open"
      @close="Close"
      :center="true"
      :modal="false"
      :destroy-on-close="true"	
      >
      <div class="login-info" v-show = QRlogin>
        <span style="font-size:28px">扫码登录</span>
        <div class="ewm">
          <div>
            <img :src="url" class="code">
            <span class="codespan" style="font-size:14.5px">使用<a href="https://music.163.com/#/download">网易云音乐APP</a>扫码登录</span>
          </div>
          <img class="limg" src="~assets/img/login.png">
        </div>
        <span style="font-size:12px;color:rgb(102,102,102);cursor:pointer" @click="changeLogin">选择其它登录模式></span>
      </div>
      <login-phone v-if="anologin"></login-phone>
    </el-dialog>

  </div>
</template>
<script>
import {request} from 'network/request'
// import LoginPhone from './loginPhone.vue'
// const Discover  = () => import('views/discover/Discover')

const LoginPhone = () => import('./loginPhone')
export default {
  data(){
    return{
      dialogVisible:this.show,
      url:'',
      key:null,
      timer:0,
      QRlogin:true,
      anologin:false,

    }
  },
  components:{
    LoginPhone
  },
  computed:{
    Show:{
      get(){
        return this.show
      },
      set(newValue){
        return newValue
      }
    }
  },
  props:{
    show:{
      type:Boolean,
      default:false
    }
  },
  async created(){
    const key = await request('GET','login/qr/key')
    this.key = key
    const data = await request ('GET',"login/qr/create",{key:key.data.unikey,qrimg:key})
    this.url = data.data.qrimg
    this.LunXun(key)
  },
  methods:{
    Close(){
      this.$emit('Close')
      for(let i = 0 ; i<this.timer ;i++){
        clearInterval(this.timer)
      }
    },
    Open(){
    //   // setTimeout(() => {
    //     this.$nextTick(async ()=>{
          
    //     })
    //   // },200);
    this.LunXun(this.key)
      
    },
    LunXun(key){
      let data = null
      for(let i = 0 ; i<this.timer ;i++){
        clearInterval(this.timer)
      }
      this.timer = setInterval(async ()=>{
        data = await request("GET",'/login/qr/check',{key:key.data.unikey,timerstamp:Date.now()})
        if(data.code === 800){
          this.getQRcode()
          for(let i = 0 ; i<this.timer ;i++){
            clearInterval(this.timer)
          }
        }
        if(data.code === 803 ){
          localStorage.setItem('cookie',data.cookie)
          location.reload()
          clearInterval(this.timer)
        }
      },2000)
    },
    getQRcode(){
      const qrcode = document.querySelectorAll('.code')[0]
      const div = document.createElement('div')
      qrcode.className = 'codes'
      qrcode.nextSibling.className = ''
      qrcode.parentNode.nextSibling.className = ''
      div.innerHTML = '点击重新获取'
      div.style.width = '100px'
      div.style.height = '30px'
      div.style.lineHeight = '30px'
      div.style.backgroundColor = 'rgb(206,35,35)'
      div.style.color = '#fff'
      div.style.borderRadius = '30px'
      div.style.cursor = 'pointer'
      div.style.position = 'absolute'
      div.style.left = "35%"
      div.style.top = "45%"
      div.style.zIndex = "1000"
      qrcode.parentNode.insertBefore(div,qrcode)
      qrcode.className += ' outcode'
      div.onclick = ()=>{
        qrcode.className = 'code'
        qrcode.nextSibling.className = 'codespan'
        qrcode.parentNode.nextSibling.className = 'limg'
        qrcode.parentNode.removeChild(div)
        this.Open()
      }
    },
    changeLogin(){
      for(let i = 0 ; i<this.timer ;i++){
        clearInterval(this.timer)
      }
      this.anologin = true
      this.QRlogin = false
      // console.log('ss')
    }
  },
}
</script>

<style scoped>
::v-deep .login-dialog .el-dialog{
  top:4vh;
  min-width:350px
}
::v-deep .login-dialog .el-dialog__close::before{
  font-size: 24px;
  position: absolute;
  top: -12px;
  right: -12px;
}
/* ::v-deep .login-dialog .el-dialog .el-dialog__footer{
  display: none;
} */
::v-deep .login-dialog .el-dialog__header{position: absolute;right: 0;}
::v-deep .login-dialog .el-dialog__body{
  padding: 0;
  height: 530px;
}
::v-deep .login-dialog .login-info span{
  padding: 0;
}
.login-info{
  padding-top: 69px;
  height: 75%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}
.ewm{
  flex-grow: 2;
  margin-top: 30px;
  text-align:center;
  /* transition: position .3s linear; */
}
.ewm a{
  text-decoration: none;
  color: rgb(12,115,194);
  
}
.ewm .code,.ewm .codes{
  display: block;
  margin:0 auto 15px;
  font-size: 17px; 
  color: rgb(102,102,102);
  width:170px;
  height:170px;
  
  /* background-color: rgb(17, 14, 14); */
  transition: all .5s ease-out; 
  position: relative;
  right: 0;
  top: 0;
}
.ewm .outcode{
  opacity: .2;
}
/* .ewm:hover{
  position: relative;
  height: 200px;
  right: -85px;
  width: 40%;
} */
.ewm:hover .code{
  position: relative;
  transform: scale(70%,70%);
  right: -80px;
  top:5px
  /* margin: 50px 0 15px 50px;  */
  /* margin-top: 32px ;
  height: 125px;
  width: 125px;*/
}
/* .ewm:hover .code{
  position: relative;
  transform: scale(70%,70%);
  right: -80px;
  top:5px */
  /* margin: 50px 0 15px 50px;  */
  /* margin-top: 32px ;
  height: 125px;
  width: 125px;*/
/* } */
.ewm:hover .codespan{
  display: block;
  position: relative;
  font-size: 50px;
  width: 140px;
  height: 50px;
  right: -95px;
  top:-8px
}
  /* .login{
    width: 50px;
    height: 50px;
    background-color:red;
  } */
  .ewm img{
    display: none;
  }
  .limg{
    display: inline !important;
    position: absolute;
    width: 162px;
    height: 244px;
    top: 31%;
    left: 60px;
    opacity: 0;
    transition: all .5s ease-out;
  }
  .ewm:hover .limg{
    opacity: 1;
    position: absolute;
    left: 0;
  }
</style>